<template>
  <div>
    <!-- <yd-slider autoplay="3000" class="rightlove">
      <yd-slider-item v-for="(item, index) in list" :key="index" :src="item.src">
        <img :src="item.src" style="height:200px;">
      </yd-slider-item>
      <hd-svg-icon name="hd-zan2" slot="right" size="35px" color="#ffffff" class="hongxin"></hd-svg-icon>
    </yd-slider> -->
      <yd-lightbox :num="list.length">
        <div style="width:100%;height:200px; overflow-y:hidden">
        <yd-lightbox-img v-for="(item, index) in list" :key="index" :src="item.src" style="width:100%;height:200px"></yd-lightbox-img>
        </div>
        <div class="imgnum">
            <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{list.length}}
        </div>
      </yd-lightbox>
    <!-- 以上轮播图 -->
    <div class="daohang">
      <div><a href="#tuijianliyou">景区概述</a></div>
      <div><a href="#yourenxuzhi">游人须知</a></div>
      <div><a href="#quanjingtiyan">全景体验</a></div>
      <div><a href="#dituyindao">地图引导</a></div>
      <div><a href="#youkedianping">游客点评</a></div>
    </div>
    <div class="tuijianliyoutitle" id="tuijianliyou">景区概述</div>
    <div class="tuijianliyoubody" v-html="lastdata.content">
    </div>
    <!-- <div class="user">
      <div class="headimg"><img src="http://img0.imgtn.bdimg.com/it/u=3853708332,954100191&fm=214&gp=0.jpg" alt=""></div>
      <div class="name">
        <div class="name-one">收藏达人</div>
        <div>编者:张益达</div>
      </div>
    </div> -->
    <!-- 以上推荐理由 -->
    <div class="youkexuzhititle" id="yourenxuzhi">游客须知</div>
    <div class="xzone">
      <yd-flexbox>
        <yd-flexbox-item>
          <yd-flexbox>
            <hd-svg-icon name="hd-zhongbiao" size="25px" color="#000000"></hd-svg-icon>
            <div style="width:80px;height:40px;line-height:20px;float:left;">开放时间<br>{{lastdata.open_time}}</div>
          </yd-flexbox>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <yd-flexbox>
            <hd-svg-icon name="hd-dianhua" size="25px" color="#000000"></hd-svg-icon>
            <div style="width:80px;height:40px;line-height:20px;float:left;">投诉电话<br>{{lastdata.mobile}}</div>
          </yd-flexbox>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <yd-flexbox>
            <hd-svg-icon name="hd-tingchechang" size="25px" color="#000000"></hd-svg-icon>
            <div style="width:80px;height:40px;line-height:20px;float:left;">停车费<br>5元/小时</div>
          </yd-flexbox>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="xztwo">
      <yd-flexbox>
        <div>
          <hd-svg-icon name="hd-dunpai" size="25px" color="#000000" style="float:left;margin-top:7px; margin-right:5px;"></hd-svg-icon>
        </div>
        <yd-flexbox-item>安全提醒<br>{{lastdata.view_security_tips}}</yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="xzthree">
      <yd-flexbox>
        <div>
          <hd-svg-icon name="hd-gonggao" size="25px" color="#000000" style="float:left;margin-top:7px; margin-right:5px;"></hd-svg-icon>
        </div>
        <yd-flexbox-item>项目收费公告<br>{{lastdata.view_fee_notice}}</yd-flexbox-item>
      </yd-flexbox>
    </div>
    <!-- 以上游客须知 -->
    <div class="quanjing">
      <div class="quanjingtiyantitle" id="quanjingtiyan">全景体验</div>
      <iframe src="http://www.baidu.com" frameborder="0" style="width:90%;height:250px;margin-left:5%;padding-bottom:20px;border-bottom:1px solid #bbbbbb;"></iframe>
    </div>
    <div class="ditu">
      <div class="dituyindaotitle" id="dituyindao">地图导引</div>
      <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" >
          <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :key="index"></el-amap-marker>
        </el-amap>
      </div>
    </div>
    <div class="fengexian"></div>
    <div class="speak">
      <div class="youkedianpingtitle" id="youkedianping">游客点评<yd-button type="danger" bgcolor="#FF9800" color="#fff" style="float:right;"> <router-link :to="{path:'lovepingnoping',query: {id:this.$route.query.id,type:'J'}}">爱评不评</router-link> </yd-button></div>
      <div class="youkedianpingbody">
        <yd-flexbox>
          <yd-flexbox-item style="padding-right:10px;height:46px;text-align: center;" align="center">
          <span class="math">{{pingjunfen.average}} </span>分 {{oyisi}}<br>高于{{SorceAsc}}%同类饭店
          </yd-flexbox-item>
          <!-- <yd-flexbox-item align="left" style="padding-left:10px;">
                位置：4.2&nbsp;&nbsp;&nbsp;&nbsp;美味：4.5 <br>
                服务：4.1&nbsp;&nbsp;&nbsp;&nbsp;卫生：4.2
          </yd-flexbox-item> -->
        </yd-flexbox>
      </div>
      <div class="fengexian"></div>
      <div class="speakbody" v-for="(spitems,$index) in speakdata" :key="$index">
        <yd-flexbox class="speaktop">
          <div class="speakheadimg"><img src="http://img0.imgtn.bdimg.com/it/u=3853708332,954100191&fm=214&gp=0.jpg" alt=""></div>
          <yd-flexbox-item style="padding: 0px 10px;float:left;">
            <router-link :to="{path:'speak_detail',query: {id:spitems.id}}">
            <div class="nickname">
              {{spitems.uid}} <br>
            </div>
            <div class="starspeak">
              打分&nbsp;<yd-rate v-model="spitems.score" readonly="readonly" count="5" color="#ff9800" activeColor="#ff9800" size="12px" padding="1px"></yd-rate>  ¥139/人
            </div>
            <div class="pinglun">
              {{spitems.content}}
            </div>
            </router-link>
            <div class="spimg" v-if="spitems.imagelist">
              <yd-flexbox>
                <yd-lightbox>
                  <div style="height: 70px;overflow-y: hidden;">
                    <yd-lightbox-img class="pinglunimgdiv" v-for="(item, $index) in spitems.imagelist" :key="$index" :src="item"></yd-lightbox-img>
                  </div>
                </yd-lightbox>
                <!-- <yd-flexbox-item class="pinglunimgdiv"><img :src="spitems.image" alt=""></yd-flexbox-item> -->
                <!-- <yd-flexbox-item class="pinglunimgdiv"><img src="http://static.ydcss.com/uploads/ydui/2.jpg" alt=""></yd-flexbox-item>
                <yd-flexbox-item class="pinglunimgdiv"><img src="http://static.ydcss.com/uploads/ydui/3.jpg" alt=""></yd-flexbox-item> -->
              </yd-flexbox>
              <div class="imgnum">
                <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{spitems.imagelist.length}}
              </div>
            </div>
            <div class="lookcz">
              <yd-flexbox>
                <yd-flexbox-item>浏览{{spitems.see}}</yd-flexbox-item>
                <yd-flexbox-item style="text-align:right;">
                  <hd-svg-icon name="hd-zan2" size="15px" color="#bbbbbb" class=""></hd-svg-icon>喜欢&nbsp;&nbsp;<hd-svg-icon name="hd-dianping" size="15px" color="#bbbbbb" class=""></hd-svg-icon>评论
                </yd-flexbox-item>
              </yd-flexbox>
            </div>
          </yd-flexbox-item>
          <router-link :to="{path:'speak_detail',query: {id:spitems.id}}">
          <div style="padding-top:0px;">{{spitems.create_time}}</div>
          </router-link>
        </yd-flexbox>
      </div>
      <yd-tabbar fixed  class="bottabbar" v-if="lastdata.book==='0'">
        <div style="width:65%;vertical-align:center;font-size:15px;color:black">
          最低¥{{this.lowestPrice}} /人&nbsp;&nbsp;共{{this.prodnum}}个产品
        </div>
        <div style="height:40px;width:28%;">
          <router-link :to="{path:'blue_onlinebooking',query: {place_code:lastdata.place_code}}">
            <yd-button type="danger" class="yybtn">立即购买</yd-button>
          </router-link>
        </div>
      </yd-tabbar>
    </div>
    <div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'amap-page',
  data() {
    return {
      list: [],
      rate4: 3,
      zoom: 14,
      readonly: true,
      center: [116.397477, 39.908692],
      // center: [121.5273285, 31.21515044],
      outdata: '',
      speakdata: [],
      pingjunfen: '',
      lastdata: '',
      oyisi: '',
      SorceAsc: '',
      place_code: this.$route.query.code,
      lowestPrice: '',
      prodnum: '',
      // markers: [],
      markers: [
        {
          // position: [121.5273285, 31.21515044],
          position: [116.397477, 39.908692]
        }
      ],
      imagelist: []
    };
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getInfo,
        data: {
          type: 'J',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.infolist;
          this.lastdata = resultData.data.sub_place;
          let long = resultData.data.sub_place.longitude
          let lat = resultData.data.sub_place.latitude
          let mkarr = []
          this.imagearr = resultData.data.sub_place.pictures_arr.split(',');
          this.imagearr.forEach(function(element) {
            var imagelist = {};
            imagelist['src'] = element;
            this.list.push(imagelist);
          }, this);
          let tempmk = {
            position: [long, lat]
          }
          // 存储marker信息
          mkarr.push(tempmk)
          this.markers = mkarr
          // alert(long);
          // alert(lat);
          // 存储中心点
          this.center = [long, lat];
          // this.center = lat;
          // alert(this.center);
        }
      });
      this.hdAjax({
        url: this.API.findCommentList,
        data: {
          type: 'J',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.speakarr = resultData.data.results;
          this.speakarr.forEach(function(element) {
            if (element.image) {
              element['imagelist'] = (element.image.split(','));
              this.speakdata.push(element);
            } else {
              element['imagelist'] = '';
              this.speakdata.push(element);
            }
          }, this);
        }
      });
      this.hdAjax({
        url: this.API.findAverage,
        data: {
          // type: 'J',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.pingjunfen = resultData.data;
          if (resultData.data.average <= 5.0 && resultData.data.average >= 4.0) {
            this.oyisi = '非常美味'
          }
          if (resultData.data.average < 4.0 && resultData.data.average >= 3.0) {
            this.oyisi = '美味'
          }
          if (resultData.data.average < 3.0 && resultData.data.average >= 2.0) {
            this.oyisi = '一般'
          }
          if (resultData.data.average < 2.0 && resultData.data.average >= 1.0) {
            this.oyisi = '差'
          }
          if (resultData.data.average < 1.0 && resultData.data.average >= 0.0) {
            this.oyisi = '极差'
          }
        }
      });
      this.hdAjax({
        url: this.API.getSorceAsc,
        data: {
          place_type: 'J',
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.SorceAsc = resultData.data.bunum
        }
      });
      this.hdAjax({
        url: this.API.getLowPriceAndNum,
        data: {
          place_code: this.place_code
        },
        success: (resultData) => {
          console.log('!@#!@#!@#');
          console.log(resultData);
          this.lowestPrice = resultData.data.guide_price;
          this.prodnum = resultData.data.product_num
        }
      });
    }
  }
}
</script>

<style scoped>
.pinglunimgdiv{
  padding: 3px;
  width: 33%;
  height: 70px;
  overflow: hidden;
}
.pinglunimgdiv img{
  width: 20px;
  height: 20px;
}
.rightlove{
  position: relative;
}
.hongxin{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
}
.daohang{
  float: left;
  width: 90%;
  height: 40px;
  margin-left: 5%;
  border-bottom: 1px solid #bbbbbb;
}
.daohang div{
  float: left;
  width: 20%;
  line-height: 40px;
  text-align: center;
}
.tuijianliyoutitle{
  float: left;
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 20px;
}
.tuijianliyoubody{
  font-size: 15px;
  float: left;
  width: 90%;
  margin-left: 5%;
  padding-bottom: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.user{
  width: 90%;
  height: 60px;
  float: left;
  margin-left: 5%;
  margin-top: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.headimg{
  float: left;
  width: 20%;
  height: 50px;
  margin-left: 50%;
}
.headimg img{
  width: 100%;
  height: 100%;
  border-radius: 23px;
}
.name{
  float: left;
  height: 50px;
  width: 28%;
  font-size: 15px;
  margin-left: 2%;
}
.name-one{
  margin-top: 5px;
  margin-bottom: 5px;
}
.youkexuzhititle{
  float: left;
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 20px;
}
.xzone{
  float: left;
  width: 90%;
  margin-left: 5%;
}
.xztwo{
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
}
.xzthree{
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #bbbbbb;
}
.quanjingtiyantitle{
  float: left;
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 20px;
}
.dituyindaotitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 20px;
}
.amap-demo {
  height: 300px;
}
.fengexian{
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  border-bottom: 1px solid #bbbbbb;
}
.youkedianpingtitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 20px;
}
.youkedianpingbody{
  width: 90%;
  margin-left: 5%;
}
.math{
  font-size: 20px;
  color: orange;
}
.speak{
  margin-bottom: 49px;
}
.speakbody{
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
  padding-bottom: 15px;
  border-bottom: 1px solid #bbbbbb;
}
.speakheadimg img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.nickname{
  width: 100%;
  margin-top: 0px;
}
.starspeak{
  display: inline-flex;
  margin-top: 10px;
}
.pinglun{
  width: 100%;
  margin-top: 5px;
}
.flexbox-item img{
  margin-top: 10px;
  width: 100%;
  padding: 2px;
}
.lookcz{
  width: 100%;
  margin-top: 5px;
}
.bottabbar{
  float: left;
  width: 100%;
  height: 50px;
  border-top: 1px solid #bbbbbb;
  z-index: 999;
  padding: 5px 5%;
}
.yybtn{
  width: 100%;
  height: 100%;
}
.moneymath{
  color: #000000;
  height: 20px;
  font-size: 15px;
}
.monbody{
  color: #000000;
  width: 100%;
  height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.speaktop{
  align-items: flex-start;
}
.imgnum{
  float:right;
  margin-right: 10px;
  margin-top: -28px;
  color:#ffffff;
  position: relative;
  background-color: #333333;
  background-color:rgba(0,0,0,0.6);
  /* border: 3px solid #333333; */
  border-radius: 18px;
  width: 45px;
  height: 20px; 
  text-align:center
}
</style>
